<template>
  <section class="top daping" id="details" v-loading="loading">
    <!--banner-->
    <div class="plan_banner report" v-if="preview" :style="{
      background: 'url('+preview.productImg+') right no-repeat',
      backgroundSize: 'cover'}">
      <div class="main-width cl">
        <div class="plan_text details_text ">
          <h4 class="details_title  slideInUp animated">{{preview.productName}}</h4>
          <p class=" slideInUp animated">{{preview.productSlogan}}</p>
          <button class="ant-btn">{{preview.btn}}</button>
        </div>
      </div>
    </div>
    <div class="list clearfix">
      <div class="items" v-for="items in list">
        <img v-lazy="items.image" :key="items.image" alt=""/>
        <div class="title">{{items.title}}</div>
        <p>{{items.content}}</p>
      </div>
    </div>
    <div class="listBanner">
      <swiper ref="mySwiper" v-bind:options="swiperOptions">
        <swiper-slide v-for="(items, index) in bannerList" v-bind:key="index" class="clearfix">
          <img v-lazy="items.img" :key="items.img" alt=""/>
          <div class="content">
            <div class="title">{{items.title}}</div>
            <p v-html="items.content"></p>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <!--<div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>-->
      </swiper>
    </div>
    <Footer @goDetails="goDetails"/>
  </section>
</template>

<script>
  import '@/assets/css/report.css'
  import '@/assets/css/daping.css'
  import indexJs from "./indexJs"
export default indexJs
</script>

<style scoped>

</style>
